<template>
  <!-- 头部 -->
  <header>
    <!-- logo -->
    <div class="logo">
      <!-- 校园社区logo -->
      <img src="@/assets/images/myheader/logo.svg" alt="" />
    </div>
    <!-- 文字区 -->
    <div class="text">
      <div v-if="$store.state.user.role === -1" @click="toBackstage">后台</div>
      <div class="home" @click="toHome">主页</div>
      <div class="write" @click="toWrite">发帖</div>
    </div>
    <!-- 搜索区 -->
    <div class="search">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="text"
        clearable
        @change="search(text)"
      >
      </el-input>
      <ul
        v-show="keyword"
        class="content"
        :class="{ defaultContent: !searchList.length }"
      >
        <li
          class="searchLi"
          v-for="(item, id) of searchList"
          :key="id"
          @click="toDetail(item.sid, item.pid)"
        >
          {{ deleteLabel(item.text) }}
        </li>
      </ul>
    </div>
    <!-- 消息区 -->
    <drop-down v-if="$store.state.token"> </drop-down>
    <div class="right" v-else>
      <el-button type="primary" @click="toLogin">登录</el-button>
      <el-button type="primary" @click="toSignUp">注册</el-button>
    </div>
  </header>
</template>

<script>
import DropDown from './dropdown/DropDown.vue'
import { search } from '@/api/services/article.services'
export default {
  data () {
    return {
      // 搜索框绑定
      text: '',
      // 搜索返回内容绑定
      searchList: [],
      // 搜索展示面板
      keyword: false
    }
  },
  components: {
    // Drawer,
    DropDown
  },
  methods: {
    // 跳转到home页面
    toHome () {
      this.$router.push('home')
    },
    async toWrite () {
      this.$router.push('/invitation')
    },
    // 跳转到登录界面
    toLogin () {
      this.$router.push('/login')
    },
    // 跳转到注册页面
    toSignUp () {
      this.$router.push('/sign')
    },
    // 跳转到后台页面
    toBackstage () {
      this.$router.push('/backstage')
    },
    // 跳转到帖子详情
    toDetail (sid, pid) {
      this.$router.push(`/detail?sid=${sid}&pid=${pid}`)
    },
    // 删除标签
    deleteLabel (text) {
      const reg = /<\/?.+?\/?>/g
      return text.replace(reg, '')
    },
    // 搜索方法
    async search (text) {
      if (!text) {
        this.searchList = []
        this.keyword = false
        return
      }
      const data = await search(text)
      if (!data) return
      this.searchList = data
      this.keyword = true
    }
  }
}
</script>

<style lang="less" scoped>
header,
.text,
.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header {
  position: sticky;
  top: 0;
  width: 100vw;
  min-width: 1200px;
  height: 8vh;
  min-height: 64px;
  padding: 0 50px;
  box-sizing: border-box;
  background-color: #0095ff;
  z-index: 11;
  box-shadow: 0 1px 40px -8px rgb(0 0 0 / 50%);
  .logo {
    width: 200px;
    height: 50px;
  }
}
.logo {
  position: relative;
  background-color: #0095ff;
  overflow: hidden;
}
.logo img {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  // height: 8vh;
}
img {
  width: 30px;
  cursor: pointer;
}
.text {
  color: #fff;
  min-width: 200px;
  div {
    margin: 0 10px;
    &:hover {
      color: #000000;
      cursor: pointer;
    }
  }
}
.search {
  position: relative;
  width: 500px;
  .content {
    position: absolute;
    top: 30px;
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid skyblue;
    box-shadow: 0 10px 30px -8px grey;
    background-color: #fff;
    z-index: -1;
  }
  .defaultContent {
    background: url("https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png")
      no-repeat center #fff;
  }
  .searchLi {
    line-height: 60px;
    padding: 0 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover {
      background-color: rgb(246, 246, 246);
    }
  }
}
.right {
  width: 240px;
  justify-content: space-around;
}
</style>
